<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title></title>
    <style>
        .box {
            width: 800px;
            height: 500px;
            background-color: cadetblue;
            margin: 0 auto;
            overflow: hidden;
        }

        p {
            text-align: center;
            color: white;
            font-weight: bold;
            font-size: 20px;

        }

        .boxBottom {
            width: 152px;
            margin: 0 auto;
        }

        i {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-image: url(./img/star.png);
            background-repeat: no-repeat;
        }

        .bottom {
            height: 300px;
            background-color: wheat;
        }

        .stars {
            background-position: 0px -28px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>点亮星星就能打分哦</p>
        <div class="boxBottom">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <p class="result">亲，请评分</p>
        <div class="bottom">

        </div>
    </div>

    <script>
        var stars = document.querySelectorAll('i');
        console.dir(stars);
        var bottom = document.querySelector('.bottom');
        console.dir(bottom);
        var result = document.querySelector('.result');
        console.dir(result);
        var divbottom = document.querySelector('.boxBottom');

        var msg = [
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ];
        var score = 0;
        for (var i = 0; i < stars.length; i++) {
            stars[i].index = i;
            stars[i].onmouseover = function () {
                for (var j = 0; j < stars.length; j++) {
                    if (j <= this.index) {
                        stars[j].classList.add('stars');
                    } else {
                        stars[j].classList.remove('stars');
                    }
                }
                var message = msg[this.index];
                var arr = message.split('|')
                bottom.innerHTML = "<strong>" + (this.index + 1) + "分" + arr[0] + "</strong><br>" + arr[1];
            }
            stars[i].onclick = function () {
                stars = this.index + 1;
                bottom.innerHTML = ''
                var arr = msg[this.index].split("|")
                result.innerHTML = "<strong>" + (this.index + 1) + "分" + arr[0] + "</strong>" + arr[1]
            }
        }
        divbottom.onmouseout = function () {
            for (var j = 0; j < stars.length; j++) {
                if (j < score) {
                    stars[j].classList.add('stars');
                } else {
                    stars[j].classList.remove('stars');
                }
            }
            // 隐藏评语
            bottom.innerHTML = ''
        }
    </script>
</body>

</html>